import React from 'react';
import { MonetRender } from '@jkyu/monet-draw-react';
import { DatePicker, Space, Button, Checkbox, Slider } from 'antd';
import { serverURL } from './config';
import './App.css';

const { RangePicker } = DatePicker;
class App extends React.Component {
  componentDidMount() {
    this.leftEvent = null;
    this.rightEvent = null;
    const leftRender = new MonetRender({
      bigScreenURL: `${serverURL}/#/screen?key=9d3357f68fa64598b6a5028ce58c8818`,
      width: '650px',
      height: '300px',
      container: 'leftDiv',
      token: '583e939d75e2515e2107edaa2985f9d1',
    });
    // 初始化数据池
    leftRender.initDataPool = () => ({
      zhangsan: '张三',
      lisi: '李四',
    });
    // 大屏信息渲染前
    leftRender.beforeScreenRender = (screenInfo) => {
      screenInfo.backgroundUrl = 'https://storage.360buyimg.com/visualdata/3c7205a1580a49dea42763f4b52c17a8.png';
    };
    // 组件信息渲染前
    leftRender.beforeComRender = (components) => {
      const idx = components.findIndex((item) => item.code === 'ext_tab');
      const oldValue = components[idx].data.value;
      const oldValueObj = JSON.parse(oldValue);
      oldValueObj[idx].option = `二开值:${oldValueObj[0].option}`;
      components[idx].data.value = JSON.stringify(oldValueObj);
    };
    // 监听数据池
    leftRender.watchDataPool = (dataPool) => {
      // eslint-disable-next-line no-console
      console.log(dataPool, 'watch');
    };
    // 组件渲染完成
    leftRender.onload = (monetEvent) => {
      this.leftEvent = monetEvent;
      monetEvent.setComConfig(56741, (config) => {
        config.style = {
          backgroundColor: 'rgba(224,72,175,0.5)',
          font: { size: 32, color: '#000000' },
        };
        return config;
      });
    };
    const rightDiv = new MonetRender({
      bigScreenURL: `${serverURL}/#/screen?key=4509ba7d900e46b48a2202b61c9de4cf`,
      width: '650px',
      height: '300px',
      container: 'rightDiv',
      token: '583e939d75e2515e2107edaa2985f9d1',
    });
    // 组件渲染完成
    rightDiv.onload = (monetEvent) => {
      this.rightEvent = monetEvent;
    };
  }

  render() {
    const optionsWithDisabled = [
      { label: 'Apple', value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange', disabled: false },
    ];
    return (
      <div className="App">
        <div id="leftDiv"></div>
        <div id="my_div">
          <Space direction="vertical" size={12}>
            <RangePicker />
            <RangePicker showTime />
            <RangePicker picker="week" />
            <RangePicker picker="month" />
            <RangePicker picker="year" />
          </Space>
          <Space style={{ marginTop: '10px' }} size={12}>
            <Button
              type="primary"
              onClick={() => {
                this.leftEvent.setDataPool('numOption', '9999999');
              }}
            >
              9999998
            </Button>
            <Button
              onClick={() => {
                this.leftEvent.setDataPool('numOption', '8888888');
              }}
            >
              8888888
            </Button>
            <Button
              type="dashed"
              onClick={() => {
                this.leftEvent.setComSeries(56741, (series) => {
                  series[0].barStyle.color = '#6DC8EC';
                  return series;
                });
              }}
            >
              改变柱子颜色
            </Button>
          </Space>
          <Space style={{ marginTop: '10px' }} size={12}>
            <Checkbox.Group options={optionsWithDisabled} defaultValue={['Apple']} />
          </Space>
          <div style={{ marginTop: '10px' }}>
            <Slider defaultValue={66} />
          </div>
        </div>
        <div id="rightDiv"></div>
      </div>
    );
  }
}

export default App;
